<template>
  <div class="home">
    <div class="card">
      <div
        class="card-item fatie"
        @click="ath('associationPosted', 1, 'toAudit')"
      >
        <i class="iconfont iconfatie" v-if="isPC"> </i>
        <div class="info">
          <span class="num">{{ info.p_num }}</span
          ><br />
          <span class="title">发帖待审核数</span>
        </div>
      </div>
      <div
        class="card-item comment"
        @click="ath('associationComment', 1, 'toCommentOn')"
      >
        <i class="iconfont iconpinglun" v-if="isPC"> </i>
        <div class="info">
          <span class="num">{{ info.c_num }}</span
          ><br />
          <span class="title">评论待审核数</span>
        </div>
      </div>
      <div
        v-if="isPC"
        class="card-item gift"
        @click="ath('activityWelfareChange', 1, 'stayOut')"
      >
        <i class="iconfont iconfuliquan" v-if="isPC"> </i>
        <div class="info">
          <span class="num">{{ info.w_num }}</span
          ><br />
          <span class="title">礼品待发放数</span>
        </div>
      </div>
      <div class="card-item fangwen">
        <i class="iconfont iconrifangwenqushi" v-if="isPC"> </i>
        <div class="info">
          <span class="num">{{ info.d_num }}</span
          ><br />
          <span class="title">日访问量</span>
        </div>
      </div>
    </div>
    <div class="echarts" v-if="isPC">
      <div class="content left">
        <div class="map-title">注册量</div>
        <div id="hryRegister" style="width: initial;height: 240px"></div>
        <div class="map-title">发帖量</div>
        <div id="posted" style="width: initial;height: 230px"></div>
      </div>
      <div class="content right">
        <div class="map-title">会员分布图</div>
        <div id="hryMap" ref="hryMap" style="height: 520px"></div>
      </div>
    </div>
  </div>
</template>

<script>
import "@/assets/fonticon/iconfont.css";
import echarts from "echarts";
import { mapState } from "vuex";
require("echarts/map/js/china");
export default {
  name: "index",
  data() {
    this.ath = this.$debounce(this.ath, 800);
    return {
      info: {},
      width: null,
      data: [
        { name: "北京", value: 199 },
        { name: "天津", value: 42 },
        { name: "河北", value: 102 },
        { name: "山西", value: 81 },
        { name: "内蒙古", value: 47 },
        { name: "辽宁", value: 67 },
        { name: "吉林", value: 82 },
        { name: "黑龙江", value: 123 },
        { name: "上海", value: 24 },
        { name: "江苏", value: 92 },
        { name: "浙江", value: 114 },
        { name: "安徽", value: 109 },
        { name: "福建", value: 116 },
        { name: "江西", value: 91 },
        { name: "山东", value: 119 },
        { name: "河南", value: 137 },
        { name: "湖北", value: 116 },
        { name: "湖南", value: 114 },
        { name: "重庆", value: 91 },
        { name: "四川", value: 125 },
        { name: "贵州", value: 62 },
        { name: "云南", value: 83 },
        { name: "西藏", value: 9 },
        { name: "陕西", value: 80 },
        { name: "甘肃", value: 56 },
        { name: "青海", value: 10 },
        { name: "宁夏", value: 18 },
        { name: "新疆", value: 180 },
        { name: "广东", value: 123 },
        { name: "广西", value: 59 },
        { name: "海南", value: 14 },
        { name: "台湾", value: 0 }
      ],
      geoCoordMap: {},
      posted: [
        {
          name: "发帖量",
          value: 0,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: "#686eff"
              },
              {
                offset: 1,
                color: "#2eb5ff"
              }
            ])
          }
        },
        {
          name: "当日发帖量",
          value: 0,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: "#e3729e"
              },
              {
                offset: 1,
                color: "#ebae9c"
              }
            ])
          }
        }
      ],
      register: [
        {
          name: "当日注册量",
          value: 10,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: "#e3729e"
              },
              {
                offset: 1,
                color: "#ebae9c"
              }
            ])
          }
        },
        {
          name: "注册量",
          value: 300,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: "#686eff"
              },
              {
                offset: 1,
                color: "#2eb5ff"
              }
            ])
          }
        }
      ]
    };
  },
  methods: {
    ath(key, query, queryKey) {
      if (this.$commonJs.isPageAth(key)) {
        this.$commonJs.goPage(key, false, query, queryKey);
      } else {
        this.$notification.error({
          message: "你暂无权限查看"
        });
      }
    },
    getInfos() {
      this.$ajax
        .get(this.$api.home)
        .then(res => {
          this.data = res.map;
          this.info = res;
          this.posted[0].value = res.allPosts;
          this.posted[1].value = res.dayPosts;
          this.register[0].value = res.dayMember;
          this.register[1].value = res.allMember;
          if (this.isPC) {
            this.getMap();
            this.getPosted();
            this.getRegister();
          }
        })
        .catch(err => {
          this.$notification.error({
            message: err
          });
        });
    },
    getMap() {
      var mapFeatures = echarts.getMap("china").geoJson.features;
      mapFeatures.forEach(v => {
        // 地区名称
        var name = v.properties.name;
        // 地区经纬度
        this.geoCoordMap[name] = v.properties.cp;
      });
      var yData = [];
      var barData = this.data;
      barData = barData.sort(function(a, b) {
        return b.value - a.value;
      });
      barData = barData.slice(0, 10);
      for (var j = 0; j < barData.length; j++) {
        if (j < 10) {
          yData.push("0" + j + barData[j].name);
        }
      }
      let option = {
        title: [
          {
            show: true,
            text: "会员分布排行前十",
            subtextStyle: {
              color: "#333",
              lineHeight: 20
            },
            textStyle: {
              color: "#333",
              fontSize: 18
            },
            right: "1%",
            top: 20
          }
        ],
        tooltip: {
          padding: 0,
          enterable: true,
          transitionDuration: 1,
          textStyle: {
            color: "#000",
            decoration: "none"
          },
          formatter: function(params) {
            var tipHtml = "";
            if (params.componentSubType === "map") {
              tipHtml =
                '<div style="width:280px;height:100px;background:#ef8554;border:1px solid #f0515e">' +
                '<div style="width:100%;height:40px;line-height:40px;border-bottom:2px solid #f0515e;padding:0 20px">' +
                '<span style="margin-left:10px;color:#fff;font-size:16px;">' +
                params.name +
                "</span>" +
                "</div>" +
                '<div style="padding:20px">' +
                '<p style="color:#fff;font-size:12px;">' +
                "会员人数：" +
                '<span style="color:#fff;margin:0 6px;">' +
                params.value +
                "</span>" +
                "个" +
                "</p>" +
                "</div>" +
                "</div>";
            }
            if (params.componentSubType === "effectScatter") {
              tipHtml =
                '<div style="width:280px;height:100px;background:#ef8554;border:1px solid #f0515e">' +
                '<div style="width:100%;height:40px;line-height:40px;border-bottom:2px solid #f0515e;padding:0 20px">' +
                '<span style="margin-left:10px;color:#fff;font-size:16px;">' +
                params.name +
                "</span>" +
                "</div>" +
                '<div style="padding:20px">' +
                '<p style="color:#fff;font-size:12px;">' +
                "会员人数：" +
                '<span style="color:#fff;margin:0 6px;">' +
                params.value[2] +
                "</span>" +
                "个" +
                "</p>" +
                "</div>" +
                "</div>";
            }
            return tipHtml;
          }
        },
        grid: {
          right: "1%",
          top: 80,
          bottom: 20,
          width: "80"
        },
        xAxis: {
          show: false
        },
        yAxis: {
          type: "category",
          inverse: true,
          nameGap: 16,
          axisLine: {
            show: false,
            lineStyle: {
              color: "#ddd"
            }
          },
          axisTick: {
            show: false,
            lineStyle: {
              color: "#ddd"
            }
          },
          axisLabel: {
            interval: 0,
            margin: 85,
            textStyle: {
              color: "#333",
              align: "left",
              fontSize: 12
            },
            rich: {
              a: {
                color: "#fff",
                backgroundColor: "#f0515e",
                width: 20,
                height: 20,
                align: "center",
                borderRadius: 2
              },
              b: {
                color: "#fff",
                backgroundColor: "#686eff",
                width: 20,
                height: 20,
                align: "center",
                borderRadius: 2
              }
            },
            formatter: function(params) {
              if (parseInt(params.slice(0, 2)) < 3) {
                return [
                  "{a|" +
                    (parseInt(params.slice(0, 2)) + 1) +
                    "}" +
                    "  " +
                    params.slice(2)
                ].join("\n");
              } else {
                return [
                  "{b|" +
                    (parseInt(params.slice(0, 2)) + 1) +
                    "}" +
                    "  " +
                    params.slice(2)
                ].join("\n");
              }
            }
          },
          data: yData
        },
        visualMap: {
          show: true,
          min: 0,
          max: 200,
          left: "1%",
          top: "bottom",
          calculable: true,
          seriesIndex: [1],
          inRange: {
            color: ["#f5e4c1", "#e56f7c"] // 蓝绿
          }
        },
        geo: {
          show: true,
          map: "china",
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: false
            }
          },
          roam: false,
          itemStyle: {
            normal: {
              areaColor: "#ef744b",
              borderColor: "#ef744b"
            },
            emphasis: {
              areaColor: "#ef744b"
            }
          }
        },
        series: [
          {
            name: "地区",
            type: "scatter",
            coordinateSystem: "geo",
            data: this.convertData(this.data),
            symbolSize: function(val) {
              return val[2] / 15;
            },
            label: {
              normal: {
                formatter: "{b}",
                position: "center",
                show: true
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: "#000000"
              }
            }
          },
          {
            type: "map",
            map: "china",
            geoIndex: 0,
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: true
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: "#fff"
                }
              }
            },
            roam: true,
            itemStyle: {
              normal: {
                areaColor: "#fa744b",
                borderColor: "#fa744b"
              },
              emphasis: {
                areaColor: "#fa744b"
              }
            },
            animation: false,
            data: this.data
          },
          {
            name: "会员分布",
            type: "effectScatter",
            coordinateSystem: "geo",
            data: this.convertData(
              this.data.sort(function(a, b) {
                return b.value - a.value;
              })
            ),
            symbolSize: function(val) {
              return val[2] / 15;
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke"
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: "{b}",
                position: "center",
                show: false
              }
            },
            itemStyle: {
              normal: {
                color: "yellow",
                shadowBlur: 10,
                shadowColor: "yellow"
              }
            },
            zlevel: 1
          },
          {
            name: "barSer",
            type: "bar",
            roam: false,
            visualMap: false,
            zlevel: 2,
            barMaxWidth: 16,
            barGap: 0,
            itemStyle: {
              normal: {
                color: function(params) {
                  var colorList = [
                    {
                      colorStops: [
                        {
                          offset: 0,
                          color: "#f0515e"
                        },
                        {
                          offset: 1,
                          color: "#ef8554"
                        }
                      ]
                    },
                    {
                      colorStops: [
                        {
                          offset: 0,
                          color: "#686eff"
                        },
                        {
                          offset: 1,
                          color: "#2eb5ff"
                        }
                      ]
                    }
                  ];
                  if (params.dataIndex < 3) {
                    return colorList[0];
                  } else {
                    return colorList[1];
                  }
                },
                barBorderRadius: [0, 15, 15, 0]
              }
            },
            label: {
              normal: {
                show: true,
                textBorderColor: "#333",
                textBorderWidth: 2
              }
            },
            data: barData.sort((a, b) => {
              return b.value - a.value;
            })
          }
        ]
      };
      let myChart = echarts.init(document.getElementById("hryMap"));
      myChart.setOption(option);
    },
    getPosted() {
      let option = {
        tooltip: {
          trigger: "item",
          formatter: function(parms) {
            var str =
              parms.seriesName +
              "</br>" +
              parms.marker +
              "" +
              parms.data.name +
              "</br>" +
              "数量：" +
              parms.data.value +
              "</br>" +
              "占比：" +
              parms.percent +
              "%";
            return str;
          }
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          left: "60%",
          align: "left",
          top: "middle",
          textStyle: {
            color: "#8C8C8C"
          },
          height: 200
        },
        series: [
          {
            name: "标题",
            type: "pie",
            center: ["30%", "50%"],
            radius: ["40%", "65%"],
            clockwise: false, //饼图的扇区是否是顺时针排布
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                position: "outter",
                formatter: function(parms) {
                  return parms.data.name;
                }
              }
            },
            labelLine: {
              normal: {
                length: 5,
                length2: 3,
                smooth: true
              }
            },
            data: this.posted
          }
        ]
      };
      let myChart = echarts.init(document.getElementById("posted"));
      myChart.setOption(option);
    },
    getRegister() {
      let option = {
        tooltip: {
          trigger: "item",
          formatter: function(parms) {
            var str =
              parms.seriesName +
              "</br>" +
              parms.marker +
              "" +
              parms.data.name +
              "</br>" +
              "数量：" +
              parms.data.value +
              "</br>" +
              "占比：" +
              parms.percent +
              "%";
            return str;
          }
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          left: "60%",
          align: "left",
          top: "middle",
          textStyle: {
            color: "#8C8C8C"
          },
          height: 200
        },
        series: [
          {
            name: "标题",
            type: "pie",
            center: ["30%", "50%"],
            radius: ["40%", "65%"],
            clockwise: false, //饼图的扇区是否是顺时针排布
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                position: "outter",
                formatter: function(parms) {
                  return parms.data.name;
                }
              }
            },
            labelLine: {
              normal: {
                length: 5,
                length2: 3,
                smooth: true
              }
            },
            data: this.register
          }
        ]
      };
      let myChart = echarts.init(document.getElementById("hryRegister"));
      myChart.setOption(option);
    },
    convertData(data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = this.geoCoordMap[data[i].name];
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value)
          });
        }
      }
      return res;
    }
  },
  mounted() {
    this.getInfos();
  },
  computed: {
    ...mapState(["isPC"])
  }
};
</script>

<style scoped lang="less">
.home {
  width: inherit;
  box-sizing: border-box;
}
.card {
  .flex_content();
  .card-item {
    .flex_one();
    .flex_content();
    .flex_align_center();
    margin-right: 20px;
    height: 140px;
    border-radius: 5px;
    cursor: pointer;
    @media screen and (max-width: 769px) {
      text-align: center;
    }
  }
  .iconfont {
    width: 36%;
    text-align: center;
    font-size: 60px;
    font-weight: bold;
    color: white;
  }
  .card-item:last-child {
    margin-right: 0;
  }
}
.info {
  color: white;
  @media screen and (max-width: 769px) {
    margin: 0 auto;
  }
  .num {
    font-size: 40px;
    font-weight: bold;
  }
  .title {
    font-size: 16px;
  }
}

.gift {
  .linear_gradient_back_top(#5aae6b, #a1d9a4);
}
.fatie {
  .linear_gradient_back_top(#686eff, #2eb5ff);
}
.comment {
  .linear_gradient_back_top(#e3729e, #ebae9c);
}
.fangwen {
  .linear_gradient_back_top(#b576b7, #b89ce1);
}
.echarts {
  margin-top: 20px;
  width: inherit;
  box-sizing: border-box;
  .flex_content();
  .left {
    flex: 24.1%;
    margin-right: 20px;
  }
  .right {
    flex: 74.69%;
  }
}
.content {
  box-shadow: 0 0 10px 10px #f0f0f0;
  background: @white;
  border-radius: 5px;
  padding: 20px;
  box-sizing: border-box;
  .map-title {
    font-weight: bold;
    font-size: 20px;
    padding-bottom: 20px;
    border-bottom: 3px solid #f0f0f0;
  }
}
</style>
